<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<style>
    *{padding: 0;margin: 0;}
    body{background: #f5f5f5;}
    ul{list-style: none;}
    img{vertical-align: middle;border: 0;}
    .upload-content{
        width: 682px;
        margin: 0 auto;
        font-size: 12px;
        color: #666;
        padding: 20px;
        background: #fff;

    }

    .upload-content .content-img{
        width: 682px;
    }

    .upload-content .content-img-list{
        display: inline;
        width: 682px;
    }

    .upload-content .content-img .ico-plus{
        display: inline-block;
        vertical-align: middle;
        margin-top: -4px;
        margin-left: 2px;
        width: 28px;
        height: 28px;
        background: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-plus.png') center/28px 28px;

    }
    .upload-content .content-img-list-item{
        position: relative;
        display: inline-block;
        width: 165px;
        height: 96px;
        margin-top: 20px;
        margin-left: 7px;
    }

    .upload-content .content-img-list-item:first-child{
        margin-left: 0;
    }
    .upload-content .content-img-list-item .hide{
        display: none;
    }

    .upload-content .content-img-list-item .delete-btn{
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: center;
        width: 100%;
        background: rgba(0,0,0,0.6);
        height: 28px;
        line-height: 28px;
        color: #fff;
        cursor: pointer;

    }
    .upload-content .content-img-list-item .ico-delete{
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 13px;
        background: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-delete.png') center/12px 13px;
    }

    .upload-content .content-img-list-item img{
        width: 165px;
        height: 96px;
    }
    .upload-content .upload-tips{
        padding-top: 10px;
        text-align: right;
        width: 100%;
    }

    .upload-content .file{
        position: relative;
        display: inline-block;
        border: 1px dashed #DEDEDE;
        border-radius: 4px;
        color: #999999;
        text-decoration: none;
        text-indent: 0;
        width: 165px;
        height: 96px;
        line-height: 96px;
        margin-top: 20px;
    }

    .upload-content .file input{
        position: absolute;
        font-size: 0px;
        right: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        width: 165px;
        height: 96px;
    }

    .upload-content .file:hover{
        color: #999999;
    }
    .upload-submit{

        text-align: center;
        margin-top: 50px;
    }
    .upload-submit .btn-submit-upload{
        display: inline-block;
        width: 170px;
        height: 40px;
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        box-sizing: border-box;
        background: #ff8819;
        color: #fff;
        border: 1px solid #ff8819;
        border-radius: 2px;
        text-decoration: none;
    }


</style>

<script>
    var imgFile = []; //文件流
    var imgSrc = []; //图片路径
    var imgName = []; //图片名字

    $(function () {
        //    鼠标经过显示删除按钮

        $(".content-img-list").on('mouseover','.content-img-list-item',function () {
            $(this).children('a').removeClass('hide');

        })

        //    鼠标离开隐藏
        $(".content-img-list").on("mouseleave",'.content-img-list-item',function () {
            $(this).children('a').addClass('hide');

        });

        function addNewContent(obj) {
            $(obj).html("");
            for(var i=0;i<imgSrc.length;i++){
                var oldBox=$(obj).html();

                $(obj).html(oldBox+'<li class="content-img-list-item"><img src="'+imgSrc[i]+'" alt=""><a index="'+i+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>' );

            }
            
        }

        //    单个图片删除
        $('.content-img-list').on('click','.content-img-list-item a',function () {
            var index=$(this).attr("index");
            imgSrc.splice(index,1);
            imgFile.splice(index,1);
            imgName.splice(index,1);
            var boxId=".content-img-list";
            addNewContent(boxId);
            if(imgSrc.length<4){
                $('.content-img .file').show();
            }

            
        })

        function getObjectURL(file) {
            var url=null;

            if(window.createObjectURL!=undefined){ //基本
                url=window.createObjectURL(file);
            }else if(window.URL!=undefined){//mozilla(firefox)

                url=window.URL.createObjectURL(file);
            }else if(window.webkitURL!=undefined){//webkit chrome
                url=window.webkitURL.createObjectURL(file)
            }

            console.log(url);

            return url;
            
        }

        //    上传
        $('#upload').on('change',function () {
            if(imgSrc.length>=4){
                return alert('最多可上传四张图片');
            }

            var imgSize=this.files[0].size;

            if(imgSize>1024*1024){
                return alert("上传图片不能超过1M");
            }
            console.log(this.files[0].type)

            if(this.files[0].type!=='image/png' && this.files[0].type!=='image/jpeg' && this.files[0].type!=='image/gif'){
                return alert("图片格式不正确");
            }

            var imgBox='.content-img-list';
            var fileList=this.files;
            for(var i=0;i<fileList.length;i++){
                var IimgSrc=getObjectURL(fileList[i]);
                imgSrc.push(IimgSrc);
                imgName.push(fileList[i].name);
                imgFile.push(fileList[i]);
            }
            if(imgSrc.length==4){
                $('.content-img .file').hide();
            }

            addNewContent(imgBox);
            this.value=null; //解决无法上传相同图片
        });
    //    提交请求
        $("#btn-submit-upload").on('click',function () {
            //FormData上传图片
            var formFile=new FormData();
            $.each(imgFile,function (i,file) {
                formFile.append('myFile[]',file);
                
            });
            console.log(imgFile);

            $.ajax({
                url:'',
                type:'POST',
                data:formFile,
                async:true,
                cache:false,
                contentType:false,//告诉jQuery不要去设置Content-Type请求头
                processData:false,// 告诉jQuery不要去处理发送的数据
                dataType:'json',
                success:function (res) {
                    console.log('图片上传成功');

                    
                }
            })
            
        })

    })
</script>
<body>


<div class="upload-content">

    <div class="content-img">
        <ul class="content-img-list">
            <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li>

        </ul>

        <div class="file">
            <i class="ico-plus"></i>上传图片<input type="file" name="file" accept="image/*" id="upload">
        </div>
    </div>
    <div class="upload-tips">
        最多上传四张图片，单张1M
    </div>
</div>
<div class="upload-submit">
    <a href="javascript:;" id="btn-submit-upload" class="btn-submit-upload">提交</a>
</div>




</body>
</html>